<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="订单详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 产品服务展示区 -->
    <van-card
      v-for="order in orderData.orderLines"
      :key="order.id"
      :num="order.number"
      :price="order.price"
      :desc="order.product.description"
      :title="order.product.name"
      :thumb="order.product.photo"
    />
    <!-- 产品总价 -->
    <div class="total">
      总价:<span style="color: red">￥{{ orderData.total }}</span>
    </div>
    <!-- 用户联系信息展示区 -->
    <van-card>
      <template #tags>
        <p>
          服务地址：{{
            orderData.address.province +
            orderData.address.city +
            orderData.address.area +
            orderData.address.address
          }}
        </p>
        <p>
          联系方式：{{ orderData.customer.realname }}({{
            orderData.customer.telephone
          }})
        </p>
        <p>下单时间：{{ orderData.orderTime | fmtDate_global }}</p>
        <p>服务时间：{{ orderData.serviceTime | fmtDate_global }}</p>
      </template>
      <template #footer>
        <p>{{ orderData.status }}</p>
      </template>
    </van-card>
    <!-- 按钮操作区 -->
    <div class="button" v-if="orderData.status == '待接单'">
      <van-button type="primary" size="small" @click="onClickTakeOrder"
        >同意接单</van-button
      >&nbsp;
      <van-button type="warning" size="small" @click="onClickRejectOrder"
        >拒绝接单</van-button
      >
    </div>
    <div style="height: 130px"></div>
  </div>
</template>

<script>
import { get, post } from "@/http/axios";
import { Dialog } from "vant";
import { Toast } from "vant";
export default {
  data() {
    return {
      //点击获取到 路由传递过来的参数-订单编号
      orderId: this.$route.query.orderId,
      orderData: {},
    };
  },
  methods: {
    //获取订单信息
    async queryOrderData() {
      let data = { id: this.orderId };
      let res = await get("/order/findById", data);
      this.orderData = res.data.data;
    },
    //接单
    async onClickTakeOrder() {
      let data = {
        orderId: this.orderData.id,
      };
      let res = await get("/order/takeOrder", data);
      if (res.status == 200) {
        Toast.success(res.data.message);
        this.queryOrderData();
      }
    },
    //拒绝接单
    onClickRejectOrder() {
      Dialog.confirm({
        title: "标题",
        message: "弹窗内容",
      })
        .then(async () => {
          let data = {
            orderId: this.orderData.id,
          };
          let res = await get("/order/rejectOrder", data);
          Toast.success(res.data.message);
          this.queryOrderData();
        })
        .catch(() => {
          // on cancel
        });
    },
    //返回按钮
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {
    this.queryOrderData();
  },
};
</script>

<style scoped>
.van-cell {
  background-color: ghostwhite;
  height: 150px;
}
.total {
  margin-left: 73%;
}
.button {
  float: right;
}
.van-nav-bar {
  background-image: linear-gradient(
    60deg,
    #3d3393 0%,
    #2b76b9 37%,
    #2cacd1 65%,
    #35eb93 100%
  );
}
</style>